Scan: add Jetpack footer to the WP.com page#109888
Open
Conversation
Wires the simplified `JetpackFooter` component (introduced in #109765) into the Scan page entry point, gated on the existing `isWpcom` variable so it only renders on the WP.com (Calypso) variant — Jetpack Cloud and A8C-for-Agencies have their own chrome and don't get a duplicate footer. Pattern matches Backup (#109886) and Podcasting from #109765: render `<JetpackFooter />` after the `<Page>`/fragment branch but inside `<Main>`, with the same `isWpcom` gate. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Jetpack Cloud Live (direct link)
Automattic for Agencies Live (direct link)
Dashboard Live (dotcom) (direct link)
|
Contributor
|
This PR modifies the release build for the following Calypso Apps: For info about this notification, see here: PCYsg-OT6-p2
To test WordPress.com changes, run |
9 tasks
The original commit only covered the happy-path ScanPage from main.tsx. Investigation against /scan/<simple-site> revealed three additional WP.com render paths reachable through the Scan controller middleware chain (client/my-sites/scan/index.js) that were missing a footer: 1. wpcom-scan-upsell.tsx (WPCOMScanUpsellPage) — reached via the showUpsellIfNoScan / showUpsellIfNoScanSelfServeFeature middlewares (and also for the no_connected_jetpack / vp_active / multisite reasons). Renders one of several PromoCard variants based on the reason prop. File is wpcom-only by construction — the scan controller gates between this and ScanUpsellPage (the Jetpack Cloud variant) at isJetpackCloud() || isA8CForAgencies(), so no gate is needed inside the file itself. 2. wpcom-upsell.tsx (WPCOMScanUpsellPage — same export name, simpler component) — reached via ScanAtomicTransferWrapper in wpcom-atomic-transfer.tsx when ! hasScanFeature. Same wpcom-only construction. 3. wpcom-atomic-transfer.tsx (ScanLoadingPlaceholder) — the loading state rendered by ScanAtomicTransferWrapper while site features or scan data are still loading. Scan-specific local component (not shared infrastructure), reachable only for non-Jetpack-Cloud sites (wpcomJetpackScanAtomicTransfer short-circuits on isJetpackCloud() || isA8CForAgencies() at the middleware level). The inner atomic-transfer CTA path routes through the shared <WPCOMBusinessAT /> component from client/components/jetpack/wpcom-business-at/index.tsx. That component was footered separately in HEADER-008's sibling PR #109886 and will reach this branch via trunk once that PR merges. Verified on willstestdotblog.wordpress.com (Simple, no scan feature → upsell render path via wpcom-atomic-transfer.tsx → wpcom-upsell.tsx) at mobile viewport (390×844): footer present, single instance, no layout issues. Verified the main.tsx happy path still works on curlingforbeginners9.wpcomstaging.com with footerCount === 1 (no duplication from the new additions). Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Part of JETPACK-1504
Proposed Changes
#109765 added the simplified Jetpack footer to four Calypso pages (Activity Log, Monetize, Traffic, Podcasting) but explicitly left Backup and Scan out due to the additional complexity of testing them. Backup is now closed by the sibling PR #109886. This PR closes the Scan half across all WP.com render paths reachable from
/scan/<site-slug>.Files touched
client/my-sites/scan/main.tsx— happy-pathScanPage(when the site has scan active). Footer gated onisWpcom. Pattern matches the Backup sibling PR Backup: add Jetpack footer to the WP.com page #109886 and Podcasting from Jetpack: add footer #109765.client/my-sites/scan/wpcom-scan-upsell.tsx—WPCOMScanUpsellPagereached via theshowUpsellIfNoScan/showUpsellIfNoScanSelfServeFeaturemiddlewares (client/my-sites/scan/index.js), plus theno_connected_jetpack/vp_active_on_site/multisite_not_supportedreasons. File is wpcom-only by construction — the scan controller gates between this andScanUpsellPage(the Jetpack Cloud variant) atisJetpackCloud() || isA8CForAgencies(), so no gate is needed inside the file itself.client/my-sites/scan/wpcom-upsell.tsx— simplerWPCOMScanUpsellPage(same export name, different file) reached viaScanAtomicTransferWrapperinwpcom-atomic-transfer.tsxwhen the site doesn't have the scan feature. Same wpcom-only construction.client/my-sites/scan/wpcom-atomic-transfer.tsx— adds footer to theScanLoadingPlaceholder(the loading state rendered byScanAtomicTransferWrapperwhile site features or scan data are still loading). Scan-specific local component, reachable only for non-Jetpack-Cloud sites becausewpcomJetpackScanAtomicTransfershort-circuits onisJetpackCloud() || isA8CForAgencies()at the middleware level.Total diff is 8 added lines across 4 files (one import + one render line per file).
Render path coverage
Scan's route middleware chain (
client/my-sites/scan/index.js) means/scan/<site>can resolve to one of several components depending on site plan/features:main.tsx::ScanPagewpcom-scan-upsell.tsx::WPCOMScanUpsellPageScanAtomicTransferWrapperwpcom-upsell.tsx::WPCOMScanUpsellPagewpcom-atomic-transfer.tsx::ScanLoadingPlaceholderWPCOMBusinessATfromclient/components/jetpack/wpcom-business-at/index.tsxScanUpsellPage(separate component)Dependency on sibling PR #109886
The Atomic-transfer-activation CTA path routes through the shared
<WPCOMBusinessAT />component atclient/components/jetpack/wpcom-business-at/index.tsx. That component is footered in the sibling Backup PR #109886 (inHEADER-008's 3-file expansion). When #109886 merges to trunk, this Scan branch will automatically get the shared fix via rebase/merge.Until then, on this branch alone, the atomic-transfer CTA state will still be missing a footer. This is acknowledged and expected — merging #109886 first, or merging both together, resolves it. The atomic-transfer state is reached only when a Business-plan WP.com site without Atomic needs to be transferred to get Scan, which is a narrow flow.
Why are these changes being made?
#109765 added the simplified Jetpack footer to four Calypso pages (Activity Log, Monetize, Traffic, Podcasting) but explicitly left Backup and Scan out — quoting that PR's description:
Backup is now closed by #109886. This PR closes the Scan half. After both land, JETPACK-1504's checklist will be complete and the parent issue (JETPACK-1391) can tick its remaining Calypso boxes.
Testing Instructions
Before / After (happy path,
main.tsx)Before: Scan page ends at the bottom of the "Don't worry about a thing" status card with empty white space below it — no footer chrome.
After: Same content with a new row at the bottom showing the green Jetpack pill on the left and the "An Automattic airline" byline on the right, matching the existing footer on Activity Log / Monetize / Traffic / Podcasting / Backup.
Steps to verify
/scan/<site-slug>. Expected: footer renders at the bottom./scan/<site-slug>. The page renders the upsell (WPCOMScanUpsellPagefrom eitherwpcom-scan-upsell.tsxorwpcom-upsell.tsxdepending on the plan/feature combo). Expected: footer renders at the bottom.ScanLoadingPlaceholder(shown during the brief loading flash) also renders the footer.isWpcom/ controller-levelisJetpackCloud()gates suppress the new footer for that platform.DOM check
Quickly verifiable from the browser console:
To confirm there's no duplicate footer rendering:
Local validation already performed
Desktop:
main.tsxhappy path): footer present, single instanceMobile viewport (390×844, ≤460px breakpoint):
ScanAtomicTransferWrapper→wpcom-upsell.tsx::WPCOMScanUpsellPage): footer renders below the "What is Jetpack?" section, wraps cleanly, single instancemain.tsx::ScanPage): footer renders below the "Don't worry about a thing" status card, wraps cleanly, single instanceThe
wpcom-scan-upsell.tsx(full upsell with branching body) andScanLoadingPlaceholderpaths use the exact same pattern as the verified paths (import +<JetpackFooter />after</Page>inside<Main>) and were code-reviewed rather than visually captured. The loading state is a transient flash too brief to reliably capture with agent-browser.Pre-merge Checklist
<footer role="contentinfo" aria-label="Jetpack">inherits the same a11y as the existingJetpackFooterusagesJetpackFooteritself and are already translated